@import "val";

.device-control-container {
  padding: 0 1rem;
}

.device-control-box {
  display: inline-block;
  vertical-align: top;

  margin: 1rem;
  width: calc(25% - 2rem);
  height: 8rem;

  border-radius: .3rem;
  box-shadow: .25rem .25rem .25rem rgba(0, 0, 0, 0.1), -.25rem -.25rem .25rem rgba(0, 0, 0, 0.1);
  padding: 0;
  background: #32777f;

  display: inline-flex;
  justify-content: space-around;
  align-items: center;
}

.device-control-icon {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  text-align: center;
  flex-grow: 1;
  flex-shrink: 1;
  &.on {
    svg {
      background: #00b797
    }
  }
  &.off {
    svg {
      background: #aaa
    }
  }
  &.error {
    svg {
      background: #d23f49
    }
  }
  &.over {
    svg {
      background: #e7db79
    }
  }
  svg {
    width: 4rem;
    height: 4rem;
    padding: 1rem;
    /* background: #f00; */
    box-shadow: .25rem .25rem .25rem rgba(0, 0, 0, .05), -.25rem -.25rem .25rem rgba(0, 0, 0, .05),
    -.25rem .25rem .25rem rgba(0, 0, 0, .05), .25rem -.25rem .25rem rgba(0, 0, 0, .05);
    border-radius: 50%;
    path {
      fill: #fff;
    }
  }
}

.device-control-stat-text {
  display: inline-block;
  vertical-align: middle;
  flex-grow: 2;
  p {
    font-size: 1.2rem;
    color: #33FFFF;
    margin: 1rem 0;
    border: 1px solid transparent;
    line-height: 2rem;
    span {
      font-size: 1.5rem;
      margin: .5rem;
    }
  }
}

.device-chart-container {
  padding: 1rem 2rem;
  width: 100%;
  height: calc(100% - 10rem);
}

.device-control-chart-container {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  height: 50%;
}

.control-left-panel {
  float: left;
  color: #fff;
  padding-right: 1rem;
  display: none;
  /*TODO*/
}

.control-right-panel {
  overflow: hidden;
  height: 100%;
}

.control-area {
  width: 27%;
  //display: inline-block;
  margin: 2rem 1.6%;
  //border: 1px dashed $light-text-color;
  //color: rgba($light-text-color, .5);
  text-align: center;
  height: calc(50% - 4rem);
  line-height: 6rem;
  flex-grow: 1;
  flex-shrink: 1;
  font-size: 2rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: rgba(50, 119, 127, .5);
  border-radius: .3rem;
  color: #ddd;

}

.control-top {
  border: 2px solid #009cac;
  text-align: center;
  height: 56.666%;
  border-radius: 4px;
}

.control-bottom {
  height: 28.333%;
  text-align: center;
  display: flex;
  align-items: center;

  border: 2px solid #009cac;
  border-radius: 4px;
}

.control-hall {
  color: #3ff;
  padding: .5rem;
  font-size: 1.2rem;
  text-align: center;
  height: 15%;
  line-height: 3;
}

/*闸机*/
.device-gate-hor {
  border: 1px dashed #f33;
  height: .5rem;
  margin-top: 1rem;
  border-width: 1px 0;
}

.device-gate-ver {
  border: 1px dashed #f33;
  width: 1.2rem;
  height: 1.5rem;
  margin-top: -1rem;
  margin-left: .5rem;
  display: inline-block;
  vertical-align: top;
}

.device-gate-icon {
  margin-top: 50%;
  text-align: center;
  color: $light-text-color;
}

.device-gate-icon-hor {
  color: $light-text-color;
  display: inline-block;
  vertical-align: middle;
  width: 30%;
  i {
    display: block;
  }
}

.device-machine {
  color: #fff;
  //padding: 1rem;
  //margin-top: 2rem;
  vertical-align: middle;
  width: 20%;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  &:nth-child(2) {
    width: 20%;
  }
}

.device-machine-pic {
  height: 4rem;
  background: #64b56f;
  flex-grow: 1;
  margin: .5rem 0;
}

